<template>
  <div :id="echarts" :style="getheight"></div>
</template>
<script>
import echartsLiquidfill from 'echarts-liquidfill'
export default {
  name: 'waterball',
  mixins: [],
  computed: {
    echarts() {
      return 'echarts' + Math.random() * 100000
    },
    getheight() {
      return `height:${this.height}px`
    }
  },
  props: {
    chartData: {
      type: Array,
      default: 0
    },
    title: {
      type: String,
      default: ''
    },
    height: {
      type: Number,
      default: 150
    }
  },
  watch: {
    chartData() {
      this.draw()
    }
  },
  data() {
    return {
      option: {
        title: {
          text: '',
          textStyle: {
            fontSize: 50,
            fontFamily: 'Microsoft Yahei',
            fontWeight: 'normal',
            color: '#bcb8fb'
          },
          x: 'center',
          y: '35%'
        },
        graphic: [
          {
            type: 'group',
            left: 'center',
            top: '60%',
            children: [
              {
                type: 'text',
                z: 100,
                left: '10',
                top: 'middle',
                style: {
                  fill: '#aab2fa',
                  text: '流量统计',
                  font: '20px Microsoft YaHei'
                }
              }
            ]
          }
        ],
        series: [
          {
            type: 'liquidFill',
            radius: '80%',
            center: ['50%', '50%'],
            //  shape: 'roundRect',
            data: [],
            backgroundStyle: {
              color: {
                type: 'linear',
                x: 1,
                y: 0,
                x2: 0.5,
                y2: 1,
                colorStops: [
                  {
                    offset: 1,
                    color: 'rgba(68, 145, 253, 0)'
                  },
                  {
                    offset: 0.5,
                    color: 'rgba(68, 145, 253, .25)'
                  },
                  {
                    offset: 0,
                    color: 'rgba(68, 145, 253, 1)'
                  }
                ],
                globalCoord: false
              }
            },
            outline: {
              borderDistance: 0,
              itemStyle: {
                borderWidth: 20,
                borderColor: {
                  type: 'linear',
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 0,
                      color: 'rgba(69, 73, 240, 0)'
                    },
                    {
                      offset: 0.5,
                      color: 'rgba(69, 73, 240, .25)'
                    },
                    {
                      offset: 1,
                      color: 'rgba(69, 73, 240, 1)'
                    }
                  ],
                  globalCoord: false
                },
                shadowBlur: 10,
                shadowColor: '#000'
              }
            },
            itemStyle: {
              normal: {
                type: 'linear',
                color: {
                  x: 0,
                  y: 0,
                  x2: 0,
                  y2: 1,
                  colorStops: [
                    {
                      offset: 1,
                      color: 'rgba(58, 71, 212, 0)'
                    },
                    {
                      offset: 0.5,
                      color: 'rgba(31, 222, 225, .2)'
                    },
                    {
                      offset: 0,
                      color: 'rgba(31, 222, 225, 1)'
                    }
                  ],
                  globalCoord: false
                },
                barBorderRadius: 10
              }
            },

            label: {
              normal: {
                formatter: ''
              }
            }
          }
        ]
      }
    }
  },
  mounted() {
    this.draw()
  },
  methods: {
    draw() {
      const chartFactor = this.$echarts.init(
        document.getElementById(this.echarts)
      )
      this.option.title.text = this.chartData * 100 + '%'
      this.option.series[0].data = this.chartData
      chartFactor.setOption(this.option)
    }
  }
}
</script>
